<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue列表渲染</title>
</head>
<body>
  <script src="./js/vue2.js"></script>
  <div id="app">
    <!-- 模板 template -->
    <!-- 循环数组  推荐使用id作为key-->
    <div v-for="(item, index) in list" :key="item.id" @click="handleArrClick(index)">
      {{item.text}}
    </div>

    <!-- 循环对象 -->
    <div v-for="(item, key, index) in obj" @click="handleObjClick(key)">
      {{index}}--{{key}}--{{item}}
    </div>
  </div>
</body>
</html>
<script>
  // 修改数组数据并修改视图，vue中可以使用以下方法修改
  // push pop shift unshift splice sort reverse
  var app = new Vue({
    el:'#app',
    data:{
      list:[
        {id:"0", text:"hello 0"},
        {id:"1", text:"hello 1"},
        {id:"2", text:"hello 2"},
      ],
      obj:{
        name: 'laf',
        age: 18,
        gender: 'male'
      }
    },
    methods: {
      handleArrClick: function(index){
        console.log(index);
        // Vue中的全局set方法
        // Vue.set(this.list, index, {text:'00000000'});

        // 实例方法 $set
        this.$set(this.list, index, {text:'00000000'});
      },
      handleObjClick: function(key){
        console.log(key);
        // Vue.set(this.obj, key, '01010101');
        this.$set(this.obj, key, '01010101');
      }
    }
  });
</script>